---
title: Configuration - Mitosis
---

# Configuration

## Mitosis Configuration

In the root of the project, from which you run mitosis,
you can add a `mitosis.config.js` file that will be read by Mitosis.
You can also specify a config file by option: `--config=<file>`.
An example might look like this:

````js react-options.cjs
// react-options.cjs

/** @type {import('@builder.io/mitosis').ToReactOptions} */
module.exports = {
	typescript: true
};
````

````js vue-options.cjs
// vue-options.cjs

/** @type {import('@builder.io/mitosis').ToVueOptions} */
module.exports = {
	typescript: true
};
````

````js mitosis-config.cjs
// mitosis-config.cjs
const react = require('./react-options.cjs');
const vue = require('./vue-options.cjs');

/** @type {import('@builder.io/mitosis').MitosisConfig} */
module.exports = {
	files: 'src/**',
	targets: ['vue', 'react'],
	options: {
		react,
		vue
	}
};
````


The `mitosis.config.js` file uses the [MitosisConfig](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/types/config.ts#L22) type:

```tsx
export type MitosisConfig = {
  /**
   * Apply common options to all targets
   */
  commonOptions?: Omit<BaseTranspilerOptions, 'experimental'>;
  /**
   * List of targets to compile to.
   */
  targets: Target[];
  /**
   * The output directory. Defaults to `output`.
   */
  dest?: string;
  /**
   * globs of files to transpile. Defaults to `src/*`.
   */
  files?: string | string[];

  /**
   * Optional list of globs to exclude from transpilation.
   */
  exclude?: string[];
  /**
   * The directory where overrides are stored. The structure of the override directory must match that of the source code,
   * with each target having its own sub-directory: `${overridesDir}/${target}/*`
   * Defaults to `overrides`.
   */
  overridesDir?: string;
  /**
   * Dictionary of per-target configuration. For each target, the available options can be inspected by going to
   * `packages/core/src/generators/xxx/types.ts`.
   *
   * Example:
   *
   * ```js
   * options: {
   *   vue: {
   *     prettier: false,
   *     namePrefix: (path) => path + '-my-vue-code',
   *   },
   *   react: {
   *     stateType: 'builder';
   *     stylesType: 'styled-jsx'
   *     plugins: [myPlugin]
   *   }
   * }
   * ```
*/
options: Partial<GeneratorOptions>;
/**
   * Configure a custom parser function which takes a string and returns MitosisJSON
   * Defaults to the JSXParser of this project (src/parsers/jsx)
*/
parser?: (code: string, path?: string) => MitosisComponent | Promise<MitosisComponent>;

/**
   * Configure a custom function that provides the output path for each target.
   * If you provide this function, you must provide a value for every target yourself.
*/
getTargetPath: ({ target }: { target: Target }) => string;

/**
   * Provide options to the parser.
*/
parserOptions?: {
  jsx: Partial<ParseMitosisOptions> & {
    /**
      * Path to your project's `tsconfig.json` file. Needed for advanced types parsing (e.g. signals).
    */
      tsConfigFilePath?: string;
    };
  };
};
```

### Targets

The `Targets` type can be any one of, or an array of the following strings:

```tsx
type targets =
  | 'alpine'
  | 'angular'
  | 'customElement'
  | 'html'
  | 'mitosis'
  | 'liquid'
  | 'react'
  | 'reactNative'
  | 'solid'
  | 'svelte'
  | 'swift'
  | 'template'
  | 'webcomponent'
  | 'vue'
  | 'stencil'
  | 'qwik'
  | 'marko'
  | 'preact'
  | 'lit'
  | 'rsc'
  | 'taro';
```

> **Note** that you can configure each target generator individually, providing [plugins](/docs/customizability/#plugins) on a case-by-case basis.

### Common options

The type `BaseTranspilerOptions` for `commonOptions` can be an object like this:

````ts

export interface BaseTranspilerOptions {
  /**
   * Runs `prettier` on generated components
   */
  prettier?: boolean;
  /**
   * Mitosis Plugins to run during codegen.
   */
  plugins?: Plugin[];
  /**
   * Enable `typescript` output
   */
  typescript?: boolean;
  /**
   * Preserves explicit filename extensions in import statements.
   */
  explicitImportFileExtension?: boolean;
}
````


### TypeScript configuration

TypeScript includes a full-fledged JSX compiler. Add the following configuration to your tsconfig.json to transpile JSX to mitosis-compatible JavaScript:

```js
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@builder.io/mitosis",
    // other config here
  }
}
```

For an example of TS configuration, look at our [basic example](https://github.com/BuilderIO/mitosis/tree/main/examples/basic/tsconfig.json)'s `tsconfig.json`.

### Overview configurations

There are ``options`` for targets which will affect all components for the generated target.
Furthermore, there are `useMetadata` options which affect only a single component.
For more information check out the `types.ts` file for each generator:

- [alpine](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/alpine/types.ts)
- [angular](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/angular/types.ts)
- [builder](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/builder/types.ts)
- [html](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/html/types.ts)
- [liquid](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/liquid/types.ts)
- [lit](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/lit/types.ts)
- [marko](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/marko/types.ts)
- [mitosis](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/mitosis/types.ts)
- [qwik](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/qwik/types.ts)
- [react](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/react/types.ts)
- [react-native](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/react-native/types.ts)
- [rsc](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/rsc/types.ts)
- [solid](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/solid/types.ts)
- [stencil](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/stencil/types.ts)
- [svelte](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/svelte/types.ts)
- [swift](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/swift/types.ts)
- [taro](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/taro/types.ts)
- [template](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/template/types.ts)
- [vue](https://github.com/BuilderIO/mitosis/blob/main/packages/core/src/generators/vue/types.ts)